<template>
	<div>

		<el-radio-group v-model="sketchType" style="margin-bottom: 15px;">
			<el-radio :label="0">静态图片</el-radio>
			<el-radio :label="1">网页代码</el-radio>
		</el-radio-group>

		<div class="sketch-wrapper" v-if="sketchType == 0">
			<!-- 图片容器 -->
			<el-card class="image-wrap" v-show="images.length > 0">
				<el-popover v-for="(item, index) in images" :key="index" placement="right-end" title="编辑图片" trigger="hover">
					<el-button size="mini" type="text" icon="el-icon-caret-top" @click="sort(index, item, 0)">上移</el-button>
					<el-button size="mini" type="text" icon="el-icon-caret-bottom" @click="sort(index, item, 1)">下移</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" title="删除" @click="images.splice(index, 1)"></el-button>

					<el-image slot="reference" :src="item" :preview-src-list="images"></el-image>
				</el-popover>
			</el-card>

			<!-- 图片上传按钮 -->
			<multiple-uploader
				drag
				:limit="30"
				uploadUrl="/goods/uploadImage"
				type="sketch"
				@change="onUploaded">
			</multiple-uploader>
		</div>

		<el-input v-else v-model="sketchHtml" type="textarea" :autosize="{minRows: 5}" resize="none" placeholder="请输入网页代码，如：<div></div>..."></el-input>

	</div>
</template>

<script>
	import multipleUploader from '@/components/uploader/multiple-uploader.vue';
	
	export default {
		components: {
			multipleUploader
		},
		props: {
			type: Number,
			sketch: String
		},
		watch: {
			type(e) {
				this.sketchType = e;
			},
			sketch(e) {
				if (this.type == 0) this.images = e.split(',');
				else this.sketchHtml = e;
			}
		},
		data() {
			return {
				sketchType: 0,
				sketchHtml: '',
				images: []
			}
		},
		methods: {
			onUploaded(res) {
				this.images.push(res);
			},
			sort(index, item, mode) {
				if (index == 0 && mode == 0) return;
				if (index == this.images.length - 1 && mode == 1) return;

				const spliceIndex = mode == 0 ? index - 1 : index + 1;
				this.images[index] = this.images.splice(spliceIndex, 1, item)[0];
			},
			returnValue() {
				if (this.sketchType == 0 && this.images.length == 0 ||
					this.sketchType == 1 && !this.sketchHtml) {
					return this.$util.msg('请完善商品概述');
				}

				const sketch = this.sketchType == 0 ? this.images.join(',') : this.sketchHtml;
				return {
					type: this.sketchType,
					sketch
				};
			}
		}
	}
</script>

<style lang="scss">
	.sketch-wrapper {
		@extend %flex-align-center;

		.image-wrap {
			max-height: 64vh;
			overflow-y: auto;
			margin-right: 20px;
		}
	}
</style>
